<template>
	<view>
		<view class="card">
			<view class="verification">
				核销码：WE343235V
			</view>
			<uqrcode ref="uqrcode" canvas-id="qrcode" value="sssss" size="93" :options="{ margin: 10 }"></uqrcode>
		</view>


		<view class="title">维修信息</view>
		<view class="card">
			<view class="Item">
				<view>
					维修单号：
				</view>
				<view>
					121212112487878
				</view>
			</view>
			<view class="Item">
				<view>
					维修状态：
				</view>
				<view>
					进行中
				</view>
			</view>
			<view class="Item">
				<view>
					车主姓名：
				</view>
				<view>
					张三
				</view>
			</view>
			<view class="Item">
				<view>
					联系方式：
				</view>
				<view>
					199966556
				</view>
			</view>
			<view class="Item">
				<view>
					维修方式：
				</view>
				<view>
					上门取车
				</view>
			</view>

			<view class="Item">
				<view>
					取车位置：
				</view>
				<view>
					山阳区32号
				</view>
			</view>
			<view class="Item">
				<view>
					预约日期：
				</view>
				<view>
					2022/11/10 11:00
				</view>
			</view>
			<view class="Item">
				<view>
					提交日期：
				</view>
				<view>
					2022/11/10 11:00
				</view>
			</view>
		</view>
		<view class="title">车辆信息</view>
		<view class="card">
			<view class="Item">
				<view>
					车辆类型：
				</view>
				<view>
					大客车
				</view>
			</view>
			<view class="Item">
				<view>
					车牌号：
				</view>
				<view>
					豫J45323
				</view>
			</view>
			<view class="carPhoto">
				<view>
					整车照片：
				</view>
				<view class="images">
					<image v-for="(item,index) in 3" class="evaluateimg" src="/static/pinglun.png" mode=""></image>
				</view>
			</view>
			<view class="carPhoto">
				<view>
					维修部分照片：
				</view>
				<view class="">
					<image v-for="(item,index) in 3" class="evaluateimg" src="/static/pinglun.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="cancel" @click="cancel()">
			取消订单
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

			cancel() {
				uni.showModal({
					title: '提示',
					content: '确认取消预约吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定后应该跳转到维修记录的页面这里暂时没写');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.verification {
		text-align: center;
		font-size: 18px;
		margin-top: 10px;
	}

	.uqrcode {
		margin: auto;
		width: 93px;
		height: 93px;
	}

	.title {
		margin-left: 20px;
		font-size: 18px;
		height: 25px;
		line-height: 25px;
		margin-bottom: 5px;
	}

	.card {
		width: 313px;
		border-radius: 5px;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
		margin: auto;
		padding-left: 15px;
		padding-right: 20px;
		margin-bottom: 20px;
	}

	.Item {
		display: flex;
		justify-content: space-between;
		height: 46px;
		line-height: 46px;
	}

	.Item>view:nth-child(1) {
		font-weight: bold;
	}

	.evaluateimg {
		width: 70px;
		height: 60px;
		margin-right: 30px;
		margin-bottom: 20px;
	}

	.images {
		margin-left: 27px;
	}

	.carPhoto {
		display: flex;
		justify-content: space-evenly;
	}

	.carPhoto>view:nth-child(1) {
		font-weight: bold;
		white-space: nowrap;
	}

	.cancel {
		text-align: center;
		line-height: 30px;
		width: 80px;
		height: 30px;
		color: #1D6FFF;
		border: 2px solid #0084Ff;
		border-radius: 5px;
		float: right;
		margin-right: 10px;
		margin-bottom: 10px;
	}
</style>